<template>
	<view class="box">
		<textarea name="" id="" cols="30" rows="10" placeholder="请输入您需要反馈的内容"></textarea>
		
		<view class="img_user">
		
			<h3 class="tit">上传图片</h3>
		<u-upload
			:fileList="fileList3"
			@afterRead="afterRead"
			@delete="deletePic"
			name="3"
			multiple
			:maxCount="10"
			:previewFullImage="true"
			class="toux"
		></u-upload>
		</view>
		
		
		<view class="yijian_bottom">
			<text>联系方式</text>
			<input type="text" placeholder="点击填写">
		</view>
		<view class="bottom_text">
			<text>
				请留下您的联系方式(微信号/QQ/邮箱)，反馈的相关问题我们会第一时间为您解答。
			</text>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					fileList1: [],
					fileList3: [{
								url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.IrxMgSAf9gskBVw6mLqlcQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2',
							
							},{
								url:'https://cdn.uviewui.com/uview/swiper/1.jpg'
							}]
				}
			},
			methods:{
				// 删除图片
				deletePic(event) {
					this[`fileList${event.name}`].splice(event.index, 1)
				},
				// 新增图片
				async afterRead(event) {
					// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					let lists = [].concat(event.file)
					let fileListLen = this[`fileList${event.name}`].length
					lists.map((item) => {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
				},
				uploadFilePromise(url) {
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
							filePath: url,
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								setTimeout(() => {
									resolve(res.data.data)
								}, 1000)
							}
						});
					})
				},
			}
	
		}
</script>

<style>
	.bottom_text>text{
		color: #999999;
		font-size: 12px;
	}
	.bottom_text{
		width:335px;
		height: 48px;
		margin: 0 auto;
		margin-top: 20px;
	}
	textarea{
		width: 100%;
		margin-top: 3px;
		background-color: white;
		border-top: 1px solid rgb(242, 242, 242);
		border-bottom:1px solid rgb(242, 242, 242) ;
	}
	.img_user{
		width: 100%;
		height: 180px;
		background-color: white;
		margin-top: 15px;
		border-top: 1px solid rgb(242, 242, 242);
		border-bottom:1px solid rgb(242, 242, 242) ;
	}
	.tit{
		margin: 10px;
		padding: 7px;
		background-color: white;
	}
	.box{
		background-color: rgb(249, 249, 249);
	}
	.yijian_bottom{
		width: 100%;
		height: 40px;
		background-color: white;
		margin-top: 15px;
		border-top: 1px solid rgb(242, 242, 242);
		border-bottom:1px solid rgb(242, 242, 242) ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;
		
	}
	.yijian_bottom>input{
		width: 100px;
		border:none;
	}
	.yijian_bottom>text{
		font-size: 14px;
		color:#666666;
	}
</style>
